<template>
  <main>
    <van-loading v-if="loading"/>
    <template v-else>
      <p class="title mt-1">
        油卡充值订单详情 
        <span :class="'status_' + order.order_status">
          ({{ order.order_status == 2 ? '已支付' : statusMap[order.order_status] }})
        </span>
      </p>
      <van-cell-group>
        <van-cell title="订单编号" :value="order.order_id" />
        <van-cell title="下单时间" :value="order.created_at" />
        <van-cell title="卡号类型" :value="order.card_type" />
        <van-cell title="油卡卡号" :value="order.card_num" />
        <van-cell title="手机号" :value="order.phone" />
        <van-cell title="充值金额" :value="'¥' + order.order_amount / 100" class="red"/>
        <!-- <van-cell title="优惠金额" :value="'¥' + orderDiscount" v-if="orderDiscount"/> -->
        <van-cell title="支付金额" :value="'¥' + order.amount / 100" class="red"/>
        <van-cell title="备注" :value="order.remark" />
        <van-cell title="拒绝原因" :value="order.reason" v-if="order.order_status == 6"/>
      </van-cell-group>
    </template>

  </main>
</template>

<script>
import { Dialog, Toast } from 'vant';
import {mapGetters, mapActions} from 'vuex'
import { OrderStatusMap } from 'utils/enum'
import crc81wire from 'crc/crc81wire';
import vueQr from 'vue-qr'
import { parseTime } from 'utils/common'
import * as Api from 'api'

export default {
  components: {
    vueQr
  },
  data() {
    return {
      loading: false,
      remark: '',
      order: '',
      station: '',
      statusMap: OrderStatusMap,
      codeText: '',
    }
  },
  computed: {
    ...mapGetters([
      'heartCard',
      'user',
      'stationData',
    ]),
    amount() {
      return (this.order.order_amount * (Number(this.stationData.now_price) / Number(this.stationData.original_price)) / 100).toFixed(2)
    },
    orderDiscount() {
      return (Number(this.order.order_amount) - Number(this.order.amount)) / 100
    },
  },
  created() {
    this.$emit('showTabMenu', false);
    this.getOrder()
  },
  methods: {
    ...mapActions([
      'setHeartCard'
    ]),
    getOrder() {
      this.loading = true
      let params = {
        order_id: this.$route.params.id
      }
      Api.OrderDetail(params).then(res => {
        this.loading = false
        this.order = res.data
      })
    },
  }
}
</script>

<style lang="less" scoped>
main{
  background: #f5f5f5;
  height: 100%;
  padding-bottom: 0;
}
.van-loading{
  background: #fff;
  padding: 30px;
  text-align: center;
}
.title{
  font-size: 15px;
  font-weight: bold;
  padding: 10px 15px;
  background: #fff;
}
.shop_logo{
  max-width: 60px;
  max-height: 60px;
  // object-fit: cover;
}
.box{
  padding: 20px;
  align-items: center;
}
.def_color{
  color: #FF5722;
}
.mt-1{
  margin-top: 10px;
}
.red .van-cell__value{
  color: red;
}
.price .van-cell__value{
  color: #ff8d0b;
}
.cell{
  padding: 10px 20px;
  background: #fff;
  font-size: 14px;
  // margin-bottom: 8px;
  border-bottom: 1px solid #f5f5f5;
}

.footer{
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 2px 2px 10px #eee;
  .left{
    padding-left: 20px;
    font-size: 14px;
    span{
      color: #ff8d0b;
      font-weight: bold;
      font-size: 20px;
    }
  }
  button{
    width: 120px;
    border-radius: 0;
    height: 100%;
  }
}
.van-cell__value{
  color: #323232;
}

.qrcode_box{
  .qrcode{
    text-align: center;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 15px 0;
  }
  img{
    width: 200px;
    height: 200px;
  }
  // width: 200px;
  // height: 200px;
}
</style>